import { Avatar, Button, Col, Divider, Row } from "antd"
import moment from "moment/moment"
import React from "react"

import type { PlasmoMessaging } from "@plasmohq/messaging"
import { sendToBackground } from "@plasmohq/messaging"
import { useStorage } from "@plasmohq/storage/hook"

const MainContent: React.FC = () => {
  const [loginInfo] = useStorage("loginInfo")
  // 获取登陆信息
  const getInfo = (key: string | undefined) => {
    // 当loginInfo为对象时
    if (typeof loginInfo === "object") {
      // 当key不为空时,返回loginInfo[key],如果loginInfo[key]不存在,返回空字符串
      if (key) {
        return loginInfo[key] || ""
      } else {
        // 当key为空时,返回loginInfo
        return loginInfo
      }
    } else {
      // 当loginInfo不为对象时,返回空字符串
      return ""
    }
  }
  // 在新tab打开链接
  const handleOpenLink = (url: string) => {
    chrome.tabs.create({ url }).then()
  }
  // 处理登出动作
  const handleLogout = async () => {
    const req = {
      name: "logoutService",
      body: {}
    } as PlasmoMessaging.Request<never, {}>
    await sendToBackground(req)
  }
  // 处理截图动作
  const handleScreenShot = async () => {
    await sendToBackground({
      name: "captureScreenService",
      body: {
        toSave: true,
        fileName: "截图_" + moment().format("YYYY年MM月DD日 HH时mm分ss秒")
      }
    })
  }
  /**
   * 登陆账号: username
   * 名称: name
   * 归属店铺: prefix:{id,name}
   * 头像: avatar
   */
  return (
    <div className="main-content">
      <Row>
        <Col span={5}>
          <Avatar src={getInfo("avatar")} size={55} style={{ marginTop: 6 }} />
        </Col>
        <Col span={19}>
          <Row>
            <Col span={24}>
              <label>登陆账号:</label>
              <span>{getInfo("username")}</span>
            </Col>
            <Col span={24}>
              <label>用户名:</label>
              <span>{getInfo("name")}</span>
            </Col>
            <Col span={24}>
              <label>所属店铺:</label>
              <span>
                {getInfo("prefix") == "" ? "" : getInfo("prefix")["name"]}
              </span>
            </Col>
          </Row>
        </Col>
      </Row>
      <Divider />
      <div className="link-content">
        <div className="link-title">常用链接</div>
        <div>
          <Button
            type="link"
            onClick={() => handleOpenLink("https://myseller.taobao.com/")}>
            淘宝千牛
          </Button>
          <Button
            type="link"
            onClick={() => handleOpenLink("https://fxg.jinritemai.com/")}>
            抖音抖店
          </Button>
          <Button
            type="link"
            onClick={() => handleOpenLink("https://s.kwaixiaodian.com/")}>
            快手小店
          </Button>
        </div>
      </div>
      <div className="link-content">
        <div className="link-title">工具箱</div>
        <div>
          <Button type="link" onClick={handleScreenShot}>
            一键截图
          </Button>
        </div>
      </div>
      <Divider />
      <div className="logout-content">
        <Button type="primary" block onClick={handleLogout}>
          退出登陆
        </Button>
      </div>
    </div>
  )
}

export default MainContent
